<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>maps</title>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <meta name="author" content="覃 源波">
        <script type="text/javascript" src="../jslib/jquery.js">
        </script>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=zh">
        </script>
        <script type="text/javascript">
            var app={
                map:null,
                init: function() {
                    var latlng = new google.maps.LatLng(24.701605783862586,108.04901733398438);
                    var myOptions = {
                        zoom: 12,
                        center: latlng,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    };
                    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
                    app.map = map;
                    /* google.maps.event.addListener(map, 'zoom_changed', function() {
                    setTimeout(moveToDarwin, 3000);
                    });*/
                    //make a marker
                     map.setCenter(latlng);
                    //info window

                    var infowindow = new google.maps.InfoWindow(
                    { content: '<div style=""><input type="text" value="ha"/>Zoom Level Test<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></div>',
                        size: new google.maps.Size(50,50),
                        position: latlng
                    });
                    infowindow.open(map);


                    // default marker 
                    var marker = new google.maps.Marker({
                        position: latlng,
                        map: map,
                        title:"Hello World!"
                    });
                    google.maps.event.addListener(map, 'click', app.placeMarker);
                },
                placeMarker: function(event) {
                    var location = event.latLng;
                    // var placeLocation = new google.maps.LatLng(event.latLng);
                    var marker = new google.maps.Marker({
                        position: location,
                        map: app.map
                    });
                    //app.map.setCenter(location);

                }
            }

            $(document).ready( function() {
                app.init();

            });

        </script>
        <style type="text/css">
            <!--
            #map_canvas{
            display:block;
            height:500px;
            width:100%;
            margin:0 auto;
            }

            -->
        </style>
        <!-- Date: 2010-12-16 -->
    </head>
    <body>
        <div id='map_canvas'>
        </div>
    </body>
</html>
